<template>
  <div class='capital capdom'>
    <div class='top'>
      <div class='left'>
        <div class='left_last'>
          <div class="block">
            <span class="demonstration" style='color: #30383e;font-size: 14px;'>支付时间：</span>
            <!-- <el-date-picker v-model="payTime" type="date" placeholder="选择日期" style="width: 152px;">
            </el-date-picker> -->
            <el-date-picker v-model="ptime" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></el-date-picker>
          </div>
        </div>
        <div class="block">
          <span class="demonstration" style='color: #30383e;font-size: 14px;'>审核时间：</span>
          <!-- <el-date-picker v-model="adjustTime" type="date" placeholder="选择日期" style="width: 152px;">
          </el-date-picker> -->
          <el-date-picker v-model="time" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></el-date-picker>
        </div>
        <div class='left_last'>
          <span>状态：</span>
          <v-numodule :list='["待核算","待支付","待发货","待收货","已完成","已驳回"]' ref='status'></v-numodule>
          <button @click='getList'>查询</button>
          <button @click='clear'>重置</button>
        </div>
        <div class='left_last'>
          <button @click='goRouter'>申请提货</button>
        </div>
      </div>

    </div>
    <div class='capital_table'>
      <div class='moddle'>
        <v-table :list='list' :tableData='tableData' :cloumn="19"></v-table>
      </div>
    </div>
    <div class='bottom'>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="limit" prev-text="上一页" next-text="下一页" layout="prev, pager, next, jumper, total" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>

</template>
<script>
import table from "../common/table.vue";
import numoudle from "../common/numodule.vue";
import $ from "jquery";
import { Message } from "element-ui";
export default {
  components: {
    "v-table": table,
    "v-numodule": numoudle
  },
  created() {
    this.$parent.flag = true;
  },
  watch: {
    ptime: function(newTime) {
      if (!newTime) return;
      this.payTimeStart = t.gshDate(newTime[0]);

      this.payTimeEnd = t.gshDate(newTime[1]);
    },
    time: function(newTime) {
      if (!newTime) return;
      this.adjustTimeStart = t.gshDate(newTime[0]);

      this.adjustTimeEnd = t.gshDate(newTime[1]);
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    goRouter() {
      this.$router.push({ path: "/PickUp" });
    },
    getList() {
      this.status =
        ["待核算", "待支付", "待发货", "待收货", "已完成", "已驳回"].indexOf(
          this.$refs.status.value
        ) + "";
      u.pickupList(
        {
          payTimeStart: this.payTimeStart,
          payTimeEnd: this.payTimeEnd,
          pageNum: this.pageNum,
          adjustTimeStart: this.adjustTimeStart,
          adjustTimeEnd: this.adjustTimeEnd,
          status: this.status == -1 ? null : this.status
        },
        data => {
          if (data && data.code == "200" && data.data.page) {
            this.tableData = [];
            this.total = data.data.page.total;
            this.index++;
            if (!data.data.page.list) {
              return;
            }
            data.data.page.list.forEach((item, index) => {
              var obj = {};
              obj.tda = index + 1;
              obj.tdb = item.expertBPX;
              obj.tdc = item.wildGinsengWeight;
              obj.tdo = item.fiveGinsengNum;
              obj.tdp = item.fiveSevenGinsengNum;
              obj.tdq = item.sevenNineGinsengNum;
              obj.tdi = item.nineElevenGinsengNum;
              obj.tdd = item.wildGinsengNum;
              obj.tde = item.channel;
              obj.tdt = item.payUserName;
              obj.tdf = item.bankNo;
              obj.tdg = item.payFee;
              obj.tdh = item.flatCost;
              obj.tdl = item.deliverCost;
              obj.tdj = item.deliverType;
              obj.tdk = item.deliverNo;
              obj.tdw = "无";
              obj.tdx = [
                "待核算",
                "待支付",
                "待发货",
                "待收货",
                "已完成",
                "已驳回"
              ][parseInt(item.status)];
              obj.date = item.adjustTime;
              obj.tdz = "支付";
              obj.id = item.id;
              this.tableData.push(obj);
            });
          }
        }
      );
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.pageNum = val + "";
      this.getList();
    },
    clear() {
      this.pageNum = "1";
      this.adjustTime = "";
      this.payTime = "";
      this.$refs.status.value = "";
      this.getList();
    }
  },
  data() {
    return {
      ptime: "",
      time: "",
      adjustTimeStart: null,
      payTimeStart: null,
      payTimeEnd: null,
      adjustTimeEnd: null,
      index: 0,
      pageNum: "1",
      status: "0",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      value1: "",
      limit: 5,
      total: 0,
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value6: "",
      value7: "",
      tableData: [],
      list: [
        { key: "tda", title: "ID" },
//        { key: "tdb", title: "申请BPX" },
        { key: "tdc", title: "野山参重量" },
        { key: "tdo", title: "人参数量" },
//        { key: "tdp", title: "5～7g人参数量" },
//        { key: "tdq", title: "7～9g人参数量" },
//        { key: "tdi", title: "9～11g人参数量" },
//        { key: "tdd", title: "野山参数量" },
        { key: "tde", title: "付款渠道" },
        { key: "tdt", title: "付款人" },
        { key: "tdf", title: "付款卡号" },
        { key: "tdg", title: "打款金额" },
        { key: "tdh", title: "工本费" },
        { key: "tdl", title: "快递费" },
        { key: "tdj", title: "发货渠道" },
        { key: "tdk", title: "发货详情" },
        { key: "tdw", title: "收款信息" },
        { key: "tdx", title: "状态" },
        { key: "date", title: "确认时间" },
        { key: "tdz", title: "操作" }
      ]
    };
  }
};
</script>
<style lang='less' scoped>
@import "../../../static/common/capital.less";
</style>
<style lang='less'>

.capdom .el-table th.is-center{
  // text-align: left;
  // padding-left: 10px;
}
.capdom .el-table th.is-center:first-child{
  // padding-left: 30px;
}
.el-range-editor.el-input__inner {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 350px !important;
  padding: 3px 10px;
  margin-right: 10px;
}
.el-icon-date {
  border-left: none !important;
  padding-left: 10px;
}
.el-range-separator {
  width: 20px !important;
  padding-right: 20px !important;
}
.el-date-editor .el-range__icon {
  font-size: 14px;
  margin-left: -5px;
  color: #c0c4cc;
  float: left;
  line-height: 32px;
}
.el-date-editor .el-range__close-icon {
  width: 0px !important;
}
.el-date-editor .el-range-input {
  width: 60% !important;
}
.el-time-spinner__item.active {
  width: 34px;
  margin-left: 13px;
}
.el-table__body {
  tr {
    td:nth-of-type(1) {
      // padding-left: 10px;
    }
  }
}
</style>
